<template>
  <div
    class="date-picker--arrow"
 
  >
    <!--   :style="{'visibility': visible == 'none'?'hidden':''}" -->
    <!-- <img :src="arrowIcon" width="25" height="25"
              @click.capture.stop.prevent="$emit('rotateArrow')"
              @mouseup.stop.prevent @mousedown.stop.prevent/> -->
    <i
      class="el-icon-caret-bottom"
      v-if="!transform"
      @click.capture.stop.prevent="$emit('rotateArrow')"
      @mouseup.stop.prevent
      @mousedown.stop.prevent
    ></i>
    <i
      class="el-icon-caret-top"
      v-else
      @click.capture.stop.prevent="$emit('rotateArrow')"
      @mouseup.stop.prevent
      @mousedown.stop.prevent
    ></i>
  </div>
</template>

<script>
const arrowAssets = require("@/assets/imgs/rotate.png");
export default {
  name: "ArrowButton",
  data() {
    return {
      arrowIcon: arrowAssets,
      visible: "none",
      transform: false,
    };
  },
  methods: {
    show() {
      this.visible = "";
    },
    hide() {
      this.visible = "none";
    },
    rotate() {
      this.transform = !this.transform;
    },
  },
};
</script>
